import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { NavBar, Toast } from '@nutui/nutui-react'

import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import axios from 'axios'
import { List, Button } from 'antd-mobile'
import Item from 'antd-mobile/es/components/dropdown/item'
export default function Qidan() {
  const [list1, setlist1] = useState([{
    imgs: [], comment: []
  }])
  const params = useParams()
  const getlist = async () => {
    let { data } = await axios.get(`http://localhost:3000/getrundan?id=${params.id}`)
    setlist1(data.list[0])

  }
  const ll = async () => {
    let { data } = await axios.post(`http://localhost:3000/runfaping?id=${params.id}`,
      { id: 1, name: "用户1231", zan: 0, text: name, time: new Date(), from: '保定理工学院' })

  }
  useEffect(() => {
    getlist()
  }, [])
  const Navigate = useNavigate()
  const [name, setName] = useState('')
  return (
    <div>
      <div style={{ width: '100%' }}>

        <p>
          <NavBar
            back={
              <>
                <ArrowLeft onClick={() => {
                     Navigate(-1)
                }} />

              </>
            }

          // onBackClick={(e) => Toast.show('返回')}
          >
            一起跑详情

          </NavBar>
        </p>
        <div style={{ padding: '10px' }}>
        <div>
            <img src={list1.img} style={{ width: '30px', float: 'left', height: '30px', borderRadius: '50%' }}></img>
            <div style={{ paddingLeft: '10px'}}>
              <p onClick={() => {
                console.log(list1)
              }}> {list1.name}</p>
              <p style={{ color: 'gray', fontSize: '11px' }}>{list1.time} <span style={{display:'inline-block',marginLeft:'5px'}}>来自:{list1.address}</span></p>
            </div>
        </div>
        <div >
            <img src={list1.img} style={{width:'100%',height:'200px',marginTop:'20px',borderRadius:'10px'}}></img>
        </div>
        <div style={{marginTop:'15px'}}>
            <p style={{fontSize:'18px'}}>{list1.test}</p>

            <p style={{color:'gray',marginTop:'8px'}}>请大家提前10分钟到场哦，一起开始跑有气势，哈哈~</p>
        </div>
        <div>
            <div style={{width:'80%',margin:'0 auto',border:'1px solid rgb(247,247,247)',borderRadius:'8px',marginTop:'20px'}}>
                <p style={{fontSize:'16px',borderBottom:'1px solid rgb(247,247,247)',padding:'10px'}}>
                    <span style={{float:'left',paddingTop:"3px"}}><img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91%E8%AF%A6%E6%83%85/u741.svg'></img></span>
                    <span style={{marginLeft:'5px'}}>约定时间:</span>
                    <span style={{marginLeft:'10px'}}>3月27日 20:00</span>
                </p>
                <p style={{fontSize:'16px',borderBottom:'1px solid rgb(247,247,247)',padding:'10px'}}>
                    <span style={{float:'left',paddingTop:"3px"}}><img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91%E8%AF%A6%E6%83%85/u743.svg'></img></span>
                    <span style={{marginLeft:'5px'}}>招募人数:</span>
                    <span style={{marginLeft:'10px'}}>2人起</span>
                </p>
                <p style={{fontSize:'16px',borderBottom:'1px solid rgb(247,247,247)',padding:'10px'}}>
                    <span style={{float:'left',paddingTop:"3px"}}><img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91%E8%AF%A6%E6%83%85/u744.svg'></img></span>
                    <span style={{marginLeft:'5px'}}>约定地点:</span>
                    <span style={{marginLeft:'10px'}}>
                        <img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91%E8%AF%A6%E6%83%85/u737.svg'></img>
                        保定理工学院
                    </span>
                </p>
                <p style={{fontSize:'16px',padding:'10px'}}>
                    <span style={{float:'left',paddingTop:"3px"}}><img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91%E8%AF%A6%E6%83%85/u742.svg'></img></span>
                    <span style={{marginLeft:'5px'}}>报名截止:</span>
                    <span style={{marginLeft:'10px'}}>3月27日 19:30</span>
                </p>
            </div>
           
        </div>

</div>
      </div>
    </div>
  )
}
